<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="root">
        <p>商品：<input type="text" v-model="goods.name"></p>
        <p>数量：<input type="text" v-model="goods.quentity"></p>
        <p>价格：<input type="text" v-model="goods.price"></p>
        <div><button @click="add">添加到购物车</button></div>

        <div>
            <ul>
                <li v-for="good in lists" :key="good.name">
                    {{good.name}}的数量是{{good.quentity}},单价是{{good.price}},小计：{{good.subTotal}}</li>

            </ul>
            <ul v-if="x==2">
                <li>总数----{{totalCount}}总价----{{totalPrice}}</li>
            </ul>
        </div>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                lists: [

                ],
                goods: {
                    subTotal: '',
                    name: '',
                    quentity: '',
                    price: '',

                },
                x: '1'
            },
            computed: {
                totalCount() {
                    let quentity = 0
                    for (let i = 0; i < this.lists.length; i++) {
                        quentity += parseInt(this.lists[i].quentity);
                    }
                    return quentity;
                },
                totalPrice() {
                    let price = 0
                    for (let i = 0; i < this.lists.length; i++) {
                        price += this.lists[i].subTotal;
                    }
                    return price;
                }

            },
            methods: {
                add() {
                    this.goods.subTotal = this.goods.price * this.goods.quentity
                    this.lists.push(this.goods);
                    this.goods = {
                        name: '',
                        quentity: '',
                        price: '',
                        subTotal: '',
                    },
                        this.x = '2'


                },
            },

        })
    </script>
</body>

</html>